<template lang="jade">
#account-setting
  //- .header
    a.backup.icon-angle-left(href='javascript:history.go(-1)')
    h1.page-title 个人资料
  .seperate
  div(v-if="user")
    .page-tabs.personal-data-tabs.weui-flex
      a.weui-flex__item(v-for='(tab, index) in tabs',
        :class='{active: currentTab===index}',
        @click="switchTab(index)") {{tab}}
    <account-basic v-if='currentTab === 0'></account-basic>
    <account-other v-if='currentTab === 1'></account-other>
    <account-password v-if='currentTab === 2'></account-password>
  .weui-loadmore(v-else)
    i.weui-loading
    span.weui-loadmore__tips 加载中
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

import AccountBasic from './AccountBasic'
import AccountOther from './AccountOther'
import AccountPassword from './AccountPassword'

export default {
  components: {
    AccountBasic,
    AccountOther,
    AccountPassword
  },
  data () {
    return {
      tabs: [
        '基本信息',
        '其他资料',
        '密码修改'
      ],
      currentTab: 0
    }
  },
  computed: {
    ...mapGetters({
      'user': 'userInfo'
    })
  },
  methods: {
    ...mapActions([
      'getUserInfo'
    ]),
    switchTab (id) {
      this.currentTab = id
    }
  }
}
</script>

<style lang="scss">
.personal-data-tabs {
  a {
    cursor: pointer;
  }
}
</style>
